import React from 'react'
import logo from '../../assets/petlogo.png'
import QQ   from'../../assets/QQ.png'
import WX   from'../../assets/weixin.png'
import axios from '../../api'
import  toast  from 'react-hot-toast'
import { useNavigate,useLocation } from 'react-router'
import styles from './index.module.less'
import { Button, Input, Form } from 'react-vant'
export default function Login() {
  const {state} = useLocation()//从注册页传过来的参数
  const navigate = useNavigate()
  
   const [form] = Form.useForm()

    const onFinish = values => {
    axios.post('/user/login',{
        username:values.username,
        password:values.password
    }).then(res=>{
        //console.log(res.token);
        localStorage.setItem('access_token',res.access_token)
        localStorage.setItem('refresh_token',res.refresh_token)
        toast.success(res.msg)
        navigate('/petClass')
    })

  }
  return (
    <div className={styles.login}>
      <div className={styles['login-wrapper']}>
        <div className={styles.avatar}>
          <img className={styles['avatar-img']} src={logo} alt="" />
        </div>
      </div>
      <div className={styles['title-father']}>
         <h1 className={styles.title}>欢迎来到宠物之家</h1>

        <Form
      form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType='submit' type='primary' block>
            登录
          </Button>
        </div>
      }
    >
      <Form.Item
        tooltip={{
          message:
            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
        }}
  
        rules={[{ required: true, message: '请填写用户名' }]}
        name='username'
        label='用户名'
        initialValue={state?.username}

      >
        <Input placeholder='请输入用户名'  />

      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: '请填写密码' }]}
        name='password'
        label='密码'
       
        initialValue={state?.password}

      >
        <Input placeholder='请输入密码'  />

      </Form.Item>
    </Form>

      <div className={styles.Choice}>
      其他登录方式
      </div>
      <div className={styles.container}>
        <img src={QQ} alt="" />
        <img src={WX} alt="" />
      </div>

      </div>
   <div className={styles['loigin-tip']} onClick={()=>navigate('/register')} >

          还没有账号？点这里去注册
      </div>
    </div>
  )
}
